<template>
    <view class="content">
        <view class="inputArea">
            <input class="fromLabel" v-model="fromLabel" placeholder="你的称呼">
            <input class="toLabel" v-model="toLabel" placeholder="发给谁">
            <input class="content" v-model="content" placeholder="留言内容">
        </view>
        <button class="sendButton" @click="sendMessage" type="primary">发送内容</button>
    </view>
</template>

<script>

    export default {
        data() {
            return {
                fromLabel: '',
                toLabel: '',
                content: ''
            };
        },
        methods: {
            async sendMessage() {
                uni.showLoading({
                    title: '发送消息中',
                    mask: true
                });
                const likeResult = await wx.cloud.callFunction({
                    name: 'sendMessage',
                    data: {
                        fromLabel: this.fromLabel,
                        toLabel: this.toLabel,
                        messageContent: this.content,
                        messageImageUrls: []
                    }
                });
                uni.hideLoading();
                if (likeResult.result.status === 'fail') {
                    uni.showToast({
                        title: likeResult.result.message,
                        icon: 'none',
                        position: 'bottom'
                    });
                }
                uni.navigateBack();
            }
        }
    };
</script>

<style lang="scss" scoped>
@import "~style/global";

.content {
    @include flexColumnCenter;
}

.inputArea{
    width: px2rpx(300);
    @include flexColumnCenter;
}

.fromLabel{
    margin-top: px2rpx(20);
    margin-bottom: px2rpx(20);
}

.toLabel{
    margin-bottom: px2rpx(20);
}

.content{
    margin-bottom: px2rpx(20);
}

</style>
